<template>
  <div>
    <a-dropdown :trigger="['click']" placement="bottomRight">
      <a-avatar
        shape="square"
        icon="user ant-dropdown-link"
        class="cs"
        :src="user.avatar"
      />
      <a-menu slot="overlay" style="top: 1rem; padding: 0.5rem">
        <a-menu-item key="0">
          <router-link :to="{ name: 'write' }">
            <a-icon type="edit" /> 写文章
          </router-link>
        </a-menu-item>
        <a-menu-item key="1">
          <span><a-icon type="snippets" /> 草稿</span>
        </a-menu-item>
        <a-menu-divider />
        <a-menu-item key="2" @click="push">
          <span><a-icon type="user" /> 我的主页</span>
        </a-menu-item>
        <a-menu-item key="3">
          <span><a-icon type="like" /> 我赞过的</span>
        </a-menu-item>
        <a-menu-item key="4">
          <span><a-icon type="book" /> 我的小册</span>
        </a-menu-item>
        <a-menu-item key="5">
          <span><a-icon type="star" /> 我的收藏集</span>
        </a-menu-item>
        <a-menu-item key="6">
          <span><a-icon type="tag" /> 标签管理</span>
        </a-menu-item>
        <a-menu-divider />
        <a-menu-item key="7" @click="changePass">
          <span><a-icon type="lock" /> 修改密码</span>
        </a-menu-item>
        <a-menu-divider />
        <a-menu-item key="8">
          <span><a-icon type="setting" /> 设置</span>
        </a-menu-item>
        <a-menu-item key="9">
          <span><a-icon type="issues-close" /> 关于</span>
        </a-menu-item>
        <a-menu-divider />
        <a-menu-item key="10" @click="handleClick">
          <span><a-icon type="logout" /> 登出</span>
        </a-menu-item>
        <a-menu-item key="11">
          <span></span>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
    <Model :visible="visible" @changeVisible="changeVisible"></Model>
  </div>
</template>

<script>
import { handleLogOut } from "@/utils/utils";
import Model from '@/components/header/HeaderRight/Model';
import { mapActions, mapState } from "vuex";
import {setSessionStorage, stringify} from '@/utils/utils';
export default {
  name: "Dropdown",
  data() {
    return {
      visible: false,
     
    };
  },
  components: {
    Model
  },
  methods: {
    ...mapActions(["asyncChangeLogin"]),
    async handleClick() {
      await handleLogOut(this);
    },
    changeVisible(type) {
      this.visible = type;
    },
    changePass() {
      this.visible = true;
    },
    push() {
      // 存储当前跳转的信息
      setSessionStorage('cid', stringify({id: this.$store.state.user._id, isUser: true}))
      // setSessionStorage('cid', this.$store.state.user._id)
      this.$router.push({name: 'user'})
    }
  },
  computed: {
    ...mapState(["user"]),
  },
};
</script>